<template>
  <ItemMusicTop :playlist="state.playlist" />
  <ItemMusicList
    :itemList="state.itemList"
    :subscribedCount="state.playlist.subscribedCount"
  />
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted, reactive } from "vue";
import { getMusicItemList, getItemList } from "@/request/api/item";
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";
export default {
  setup() {
    const state = reactive({
      playlist: {}, // 歌单详情
      itemList: [], //歌单的歌曲
    });
    onMounted(async () => {
      // 获取歌单详情
      let id = useRoute().query.id;
      let res1 = await getMusicItemList(id);
      state.playlist = res1.data.playlist;
      // 获取歌单列表
      let res2 = await getItemList({ id, limit: 10, offset: 0 });
      console.log(res2);
      state.itemList = res2.data.songs;
      // 防止页面刷新s数据都是，保存到sessionStorage中
      sessionStorage.setItem("itemDetail", JSON.stringify(state));
    });
    return { state };
  },
  components: {
    ItemMusicTop,
    ItemMusicList,
  },
};
</script>

<style>
</style>